import React, {Component, createRef} from 'react'
import {
  View,
  Text,
  StyleSheet,
  Platform,
  TouchableOpacity,
  Alert,
  ActivityIndicator,
  Dimensions,
  Image,
  TouchableHighlight
} from 'react-native'


import ICON from 'react-native-vector-icons/Ionicons'
import font from "../../styles/font";
import {Actions} from "react-native-router-flux";
import { SafeAreaView } from 'react-navigation';
import { Input, Toast, Button  } from 'teaset'
import CodeInput from 'react-native-confirmation-code-field';
import SmoothPinCodeInput from 'react-native-smooth-pincode-input';
import JPushModule from 'jpush-react-native'

const {
  height: deviceHeight,
  width: deviceWidth
} = Dimensions.get("window");

class SmsCodeScene extends Component{
  constructor(props){
    super(props)
    this.state = {
      code: '',
      buttonStatus:true
    }
  }

  componentDidMount() {
    if(this.props && this.props.sendCodeMsg)
    Toast.success(this.props.sendCodeMsg)
  }


  componentWillReceiveProps(nextProps) {
    const { userBind, phoneLogin } = nextProps
    if(userBind !== this.props.userBind){
      if (userBind.error !== false) {
        this.setState({buttonStatus: true})
        Toast.fail(userBind.error.message)
      }else{
        if (userBind.isLoading) {

        }else{
          Actions.pop({refresh:{refresh:true}, timeout:1})
        }
      }
    }


    if(phoneLogin !== this.props.phoneLogin){
      if (phoneLogin.error !== false) {
        this.setState({buttonStatus: true})
        Toast.fail(phoneLogin.error.message)
        Actions.pop({refresh:{refresh:true}, timeout:1})
      }else{
        if (phoneLogin.isLoading) {

        }else{
          Actions.pop({refresh:{refresh:true}, timeout:1})
        }
      }
    }
  }


  _submit(){
    this.setState({buttonStatus:true})
    JPushModule.getRegistrationID(registrationId => {
      if(this.props.loginType === 'bind'){
        this.props.actions.userBind({
          phone:this.props.phone,
          reg_id: registrationId,
          oauth: 'weixin',
          code: this.state.code,
          w_user: this.props.w_user
        })
      }else if(this.props.loginType === 'phone_login'){
        this.props.actions.phoneLogin({
          phone:this.props.phone,
          reg_id: registrationId,
          code: this.state.code,
        })
      }else {
        Toast.fail('发送错误了')
      }
    })

  }


  _onFinishCheckingCode(code){
    this._changeText(code)
    // this._submit()
  }

  _changeText(text){
    this.setState({code: text})
    if(text.length === 5){
      this.setState({buttonStatus: false})
    }else{
      this.setState({buttonStatus: true})
    }

  }


  renderCountdown(){
    return(
      <Text style={{fontSize:18, color:'#fff'}}>下一步</Text>
    )
  }

  codeInputRef = createRef();


  render(){
    return(
      <SafeAreaView style={styles.container}>
        <View style={styles.title}>
          <ICON color='#000' size={26} name="md-arrow-back" onPress={()=>{Actions.pop()}}/>
          <Text style={[font.black18]}>验 证 码</Text>
          <View style={{width:20}}></View>
        </View>
        <View style={styles.content}>
          <View style={{position:'absolute', width:deviceWidth, height:50, top:200, zIndex: this.props.userBind.isLoading ? 99 : 0}}>
            <ActivityIndicator
              animating={this.props.userBind.isLoading}
              size='large'
            />
          </View>
          <View style={{position:'absolute', width:deviceWidth, height:50, top:200, zIndex: this.props.phoneLogin.isLoading ? 99 : 0}}>
            <ActivityIndicator
              animating={this.props.phoneLogin.isLoading}
              size='large'
            />
          </View>
          <Text style={{fontSize:18, color:'#c1c1c1'}}>
            验证码已发送至 +86 {this.props.phone}
          </Text>
          {/*<CodeInput*/}

            {/*onFulfill={(isValid, code) => this._onFinishCheckingCode(isValid, code)}*/}
          {/*/>*/}
          {/*<CodeInput*/}
            {/*ref={this.codeInputRef}*/}
            {/*codeLength={5}*/}
            {/*keyboardType="numeric"*/}
            {/*variant='border-b'*/}
            {/*inactiveColor='rgba(193, 193, 193, 1)'*/}
            {/*activeColor='rgba(0, 0, 0, 1)'*/}
            {/*inputProps={{*/}
              {/*style:{fontSize: 20, fontWeight:'600', color:'#000'},*/}
            {/*}}*/}
            {/*containerProps={{marginTop:10}}*/}
            {/*inputPosition='full-width'*/}
            {/*size={60}*/}
            {/*autoFocus={true}*/}
            {/*onFulfill={(code) => this._onFinishCheckingCode(code)}*/}
          {/*/>*/}

          <SmoothPinCodeInput
            cellStyle={{
              borderBottomWidth: 2,
              borderColor: 'gray',
            }}
            cellStyleFocused={{
              borderColor: 'black',
            }}
            codeLength={5}
            onFulfill={()=>{this._submit()}}
            keyboardType="numeric"
            value={this.state.code}
            cellSize={60}
            onTextChange={code => this._changeText(code)}
          />
          <Button type='primary' size='xl'
                  style={{height:40, backgroundColor:'#ff330a', borderWidth: 0, marginTop: 50}}
                  disabled={this.state.buttonStatus}
                  onPress={()=>{this._submit()}}
          >
            {this.renderCountdown()}
          </Button>
        </View>

      </SafeAreaView>
    )
  }
}

const styles = {
  container:{
    backgroundColor: '#fff',
    flex: 1,
  },
  title:{
    borderBottomColor:'#f6f6f6',
    borderBottomWidth:1,
    height:40,
    justifyContent:'space-between',
    alignItems:'center',
    paddingHorizontal:10,
    flexDirection:'row'
  },
  content:{
    paddingTop:50,
    paddingHorizontal:20,
    flexDirection:'column'
  },

}


export const LayoutComponent = SmsCodeScene

export function mapStateToProps(state, props) {
  return {
    routes: state.routes,
    userBind: state.bindReducer,
    phoneLogin: state.phoneLoginReducer
  }
}